<template>
  <div
    class="genres scrollbar"
    v-if="girlsChannel.length > 0 || boysChannel.length > 0"
  >
    <div class="head">
      <h2 class="title">Genres</h2>
    </div>
    <div class="main">
      <div class="v-scroll" @click="scrollClick($event)">
        <vue-seamless-scroll
          class="seamless-warp"
          :data="girlsChannel"
          :class-option="optionRight"
        >
          <ul class="girls-box">
            <li v-for="item of girlsChannel" :key="item.id">
              <img
                :src="item.imgUrl"
                :data-sex="'female'"
                :data-id="item.categoryId"
                v-default-img="defaultImg"
              />
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
      <div class="v-scroll" @click="scrollClick($event)">
        <vue-seamless-scroll
          class="seamless-warp"
          :data="boysChannel"
          :class-option="optionLeft"
        >
          <ul class="boys-box">
            <li v-for="item of boysChannel" :key="item.id">
              <img
                :src="item.imgUrl"
                :data-sex="'male'"
                :data-id="item.categoryId"
                v-default-img="defaultImg"
              />
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
// import $ from "jquery";
export default {
  props: {
    list: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      defaultImg: require("@/assets/images/default-genres-cover.png"),
    };
  },
  components: {
    vueSeamlessScroll,
  },
  computed: {
    optionRight() {
      return {
        step: this.girlsChannel.length >= 3 ? 0.7 : 0, // 数值越大速度滚动越快
        direction: 3, //方向 0 往下 1 往上 2向左 3向右
        limitMoveNum: 3, //开启无缝滚动的数据量
        hoverStop: false, //是否启用鼠标hover控制
      };
    },
    optionLeft() {
      return {
        step: this.boysChannel.length >= 3 ? 0.7 : 0,
        direction: 2, //方向 0 往下 1 往上 2向左 3向右
        limitMoveNum: 3, //开启无缝滚动的数据量
        hoverStop: false, //是否启用鼠标hover控制
      };
    },
    girlsChannel() {
      if (this.list && this.list.girlsChannel.length > 0) {
        return this.newSort(this.list.girlsChannel, "sort");
      } else {
        return [];
      }
    },
    boysChannel() {
      if (this.list && this.list.boysChannel.length > 0) {
        return this.newSort(this.list.boysChannel, "reverse");
      } else {
        return [];
      }
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    newSort(arr, order) {
      if (order === "sort") {
        return arr.sort(this.utils.compareSort("sort"));
      } else if (order === "reverse") {
        return arr.sort(this.utils.compareReverse("sort"));
      }
    },
    scrollClick(e) {
      let data = e.target.dataset;
      if (data.id) {
        this.$router.push({
          name: "libraryView",
          params: {
            sex: data.sex,
            genre: data.id,
            state: "all",
          },
        });
      }
      // this.$emit("toLibrary", data.sex, data.id);
    },
    // 跳转library页
    //   toLibrary(sex, id) {
    //     this.$router.push({
    //       name: "libraryView",
    //       params: {
    //         sex,
    //         genre: id,
    //         state: "all",
    //       },
    //     });
    //     // 1男频；2女频
    //     // if(item.preference === 1) {
    //     //   this.$router.push({
    //     //     name: "libraryView",
    //     //     params: {
    //     //       sex: "female",
    //     //       genre: item.categoryId,
    //     //       state: "all"
    //     //     }
    //     //   })
    //     // } else if(item.preference === 2) {
    //     //   this.$router.push({
    //     //     name: "libraryView",
    //     //     params: {
    //     //       sex: "female",
    //     //       genre: item.categoryId,
    //     //       state: "all"
    //     //     }
    //     //   })
    //     // }
    //   },
  },
};
</script>

<style lang="scss" scoped>
.genres {
  // height: 500px;
  margin-bottom: 40px;
  padding: 13px 0;
  background: #fff6f6;
  .head {
    padding: 17px 0 29px 40px;
    .title {
      padding-left: 10px;
      border-left: 8px solid #e86472;
    }
  }
  .main {
    .seamless-warp {
      overflow: hidden;
      height: 134px;
      width: 100%;
      margin-bottom: 56px;
      ul {
        width: 1008px;
        li {
          float: left;
          margin-left: 56px;
          img {
            width: 280px;
            height: 134px;
            border-radius: 16px;
          }
        }
        // &.girls-box {
        // }
        // &.boys-box {
        // }
      }
    }
  }
}
</style>
